---
title: Ikoner
image: /images/user-guide/objects/objects.png
---

<Frame>
  <img src="/images/user-guide/objects/objects.png" alt="Header" />
</Frame>

En liste over ikoner som brukes i hele appen vår.

## Tabler-ikoner

Vi bruker Tabler-ikoner i React i hele appen.

<Tabs>

<Tab title="Installation"><br/>

```
yarn add @tabler/icons-react
```

</Tab>

<Tab title="Props">

Du kan importere hvert ikon som en komponent. Here's an example: <br />

```jsx
import { IconArrowLeft } from "@tabler/icons-react";

export const MyComponent = () => {
  return <IconArrowLeft color="red" size={48} />;
};
```

</Tab>

<Tab title="Props">

| <span>Egenskaper</span> | Type                | Beskrivelse                           | Standard       |
| ----------------------- | ------------------- | ------------------------------------- | -------------- |
| størrelse               | nummer              | Høyden og bredden på ikonet i piksler | 24             |
| farge                   | <span>streng</span> | Fargen på ikonene                     | gjeldendeFarge |
| strek                   | nummer              | Strekbredden på ikonet i piksler      | 2              |

</Tab>

</Tabs>

## Tilpassede ikoner

I tillegg til Tabler-ikoner bruker appen også noen tilpassede ikoner.

### Ikon for adressebok

Viser et adressebokikon.

<Tabs>

<Tab title="Usage">

```jsx
import { IconAddressBook } from 'twenty-ui/display';

export const MyComponent = () => {
  return <IconAddressBook size={24} stroke={2} />;
};
```

</Tab>

<Tab title="Props">

| <span>Egenskaper</span> | Type   | Beskrivelse                           | Standard |
| ----------------------- | ------ | ------------------------------------- | -------- |
| størrelse               | nummer | Høyden og bredden på ikonet i piksler | 24       |
| strek                   | nummer | Strekbredden på ikonet i piksler      | 2        |

</Tab>

</Tabs>
